<template>
	<view class="u-text f-por">
		<textarea :value="value" @input="inputHandler" :maxlength="maxlength" :placeholder="placeholder" placeholder-class="ph" />
		<text class="text-desc" v-if="valueLength < maxlength">{{ valueLength }}/{{ maxlength }}</text>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: String,
				default: ''
			},
			maxlength: {
				type: Number
			},
			placeholder: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				
			};
		},
		created() {
			console.log('value------------------');
			console.log(this.value);
			console.log('maxlength-----------');
			console.log(this.maxlength);
		},
		computed: {
			valueLength() {
				return this.value.length;
			}
		},
		methods: {
			inputHandler(event) {
				const that = this;
				let value = event.detail.value.replace(/^\s/g, '');
				that.$emit('input', value);
			}
		}
	}
</script>

<style lang="scss">
	.u-text {
		.text-desc {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			font-size: 24rpx;
			color: #333333;
		}
	}
</style>